<template>
  <div class="repayment-plan-list" :class="theme">
    <div class="container">
      <div class="plan-header">
        <div class="pandect">
          <div class="repay-sum-board">
            <div class="board-tips text-overflow">总还款金额（元）</div>
            <div class="borad-value text-overflow">
              <i class="icon-sum"></i>
              <span>
                <span class="integer" v-html="sum.repaymentAmount"></span>
                <span class="point">.</span>
                <span class="decimal">00</span>
              </span>
            </div>
            <i class="parting-line"></i>
          </div>
          <div class="consumption-sum-board">
            <div class="board-tips text-overflow">总消费金额（元）</div>
            <div class="borad-value text-overflow">
              <i class="icon-sum"></i>
              <span>
                <span class="integer" v-html="sum.consumeAmount"></span>
                <span class="point">.</span>
                <span class="decimal">00</span>
              </span>
            </div>
          </div>
        </div>
        <div class="status">
          <div class="status-cell btn-color" @click="handleStateChange(null)">全部</div>
          <div class="status-cell status-0" @click="handleStateChange(0)">
            <i class="icon-satus icon-status-0"></i>
            <span>待执行</span>
          </div>
          <div class="status-cell status-1" @click="handleStateChange(1)">
            <i class="icon-satus icon-status-1"></i>
            <span>成功</span>
          </div>
          <div class="status-cell status-2" @click="handleStateChange(2)">
            <i class="icon-satus icon-status-2"></i>
            <span>等待</span>
          </div>
          <div class="status-cell status-3" @click="handleStateChange(3)">
            <i class="icon-satus icon-status-3"></i>
            <span>执行中</span>
          </div>
          <div class="status-cell status-4" @click="handleStateChange(4)">
            <i class="icon-satus icon-status-4"></i>
            <span>异常</span>
          </div>
        </div>
      </div>
      <div class="plan-list" v-if="plan_list.length!==0">
        <div class="plan-cell" v-for="(cell,index) in plan_list" :key="index">
          <div class="submit-date-board">
            <div class="submit-label">
              <i class="icon-date"></i>
              <span>提交时间</span>
            </div>
            <div class="submit-date">
              <span v-html="cell.createTime"></span>
            </div>
          </div>
          <div class="consumption-info" @click="getMainPlanList(cell)">
            <div class="plan-consumption-sum">
              <span>消费总金额</span>
              <span class="sum-value">
                <span>￥</span>
                <span v-html="cell.amount"></span>
              </span>
            </div>
            <div class="plan-commission">
              <div class="commission-cell">
                <span>服务费</span>
                <span class="commission-cell-value">
                  <span>￥</span>
                  <span v-html="cell.serviceCharge"></span>
                </span>
              </div>
              <div class="commission-cell">
                <span>费率</span>
                <span class="commission-cell-value">
                  <span>&nbsp;</span>
                  <span v-html="(cell.rate*100).toFixed(2)"></span> %
                </span>
              </div>
            </div>
          </div>
          <div class="repayment-info">
            <div class="plan-repayment-sum">
              <span>还款总金额</span>
              <span class="sum-value">
                <span>￥</span>
                <span v-html="cell.realAmount"></span>
              </span>
            </div>
            <div class="plan-repayment">
              <div class="commission-cell">
                <span>应收服务费</span>
                <span class="commission-cell-value">
                  <span>￥</span>
                  <span v-html="cell.totalServiceCharge"></span>
                </span>
              </div>
              <div class="commission-cell">
                <span>退还手续费</span>
                <span class="commission-cell-value">
                  <span>￥</span>
                  <span v-html="cell.returnServiceCharge"></span>
                </span>
              </div>
            </div>
          </div>
          <div class="plan-status">
            <span v-if="cell.orderStatus === 0">
              <span class="btn-u btn-active" @click="handleActive(cell)">激活</span>
              <span class="btn-u btn-del" @click="handleDel(cell)">删除</span>
            </span>
            <span class="show-status">
              <i class="icon-satus" :class="'icon-status-'+ cell.taskStatus"></i>
              <span v-html="statusList[cell.taskStatus]"></span>
            </span>
          </div>
        </div>

        <div style="height:2rem;"></div>
      </div>
      <div class="no-plan-list" v-else>没有数据</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "repayment-plan-list",
  data() {
    return {
      theme: "407",
      cardNo: null,
      status: null,
      page: 1,
      sum: {
        consumeAmount: 0,
        repaymentAmount: 0
      },
      statusList: {
        'undefined': "未知",
        "0": "待执行",
        "1": "已执行",
        "2": "失败",
        "3": "已生成",
        "4": "异常",
        "5": "主计划",
        "6": "进行中",
        "7": "用户删除"
      },
      plan_list: []
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.cardNo = this.$route.params.cardNo;
      this.getPlanList();
    },
    getMainPlanList(plan) {
      this.$router.push({
        name: "mainPlanList",
        meta: { title: "计划主任务列表" },
        params: { cardNo: this.cardNo }
      });
    },
    handleStateChange(id) {
      this.status = id;
      this.getPlanList();
    },
    getPlanList() {
      this.$vux.loading.show();
      let url = `creditcardmanager/query/taskbill/all/batchno`,
        params = `userId=${sessionStorage.getItem("userid")}&creditCardNumber=${this.cardNo}`;
      if (this.status !== null && this.status !== "") {
        params += `&status=${this.status}`;
      }
      this.$Http
        .post(url, params)
        .then(res => {
          this.$vux.loading.hide();
          if (res.data.resp_code === "000000") {
            if(Object.keys(res.data.result).length!==0 ){
              this.plan_list = res.data.result.page.content;
              this.sum.consumeAmount = res.data.result.consumeAmount;
              this.sum.repaymentAmount = res.data.result.repaymentAmount;
            }
          } else {
            this.$vux.alert.show({
              title: "温馨提示",
              content: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "温馨提示",
            content: "服务器繁忙！查询列表失败！"
          });
        });
    },
    handleActive(cell) {
      // 激活任务
      this.$vux.confirm.show({
        title: "温馨提示",
        content: "激活后无法删除任务，您确定要激活任务吗？",
        onConfirm: () => {
          const url = `creditcardmanager/update/all/plan`;
          const params = `userId=${cell.userId}&creditCardNumber=${
            cell.creditCardNumber
          }&type=1`;
          this.$Http
            .post(url, params)
            .then(res => {
              if (res.data.resp_code === "000000") {
                this.getPlanList();
              }
              this.$vux.alert.show({
                title: "温馨提示",
                content: res.data.resp_message
              });
            })
            .catch(err => {
              this.$vux.alert.show({
                title: "温馨提示",
                content: "服务器繁忙！激活任务失败！"
              });
            });
        }
      });
    },
    handleDel(cell) {
      // 删除任务
      this.$vux.confirm.show({
        title: "温馨提示",
        content: "您确定要删除本次临时计划吗？",
        onConfirm: () => {
          const url = `creditcardmanager/update/all/plan`;
          const params = `userId=${cell.userId}&creditCardNumber=${
            cell.creditCardNumber
          }&type=2`;
          this.$Http
            .post(url, params)
            .then(res => {
              if (res.data.resp_code === "000000") {
                this.getPlanList();
              }
              this.$vux.alert.show({
                title: "温馨提示",
                content: res.data.resp_message
              });
            })
            .catch(err => {
              this.$vux.alert.show({
                title: "温馨提示",
                content: "服务器繁忙！删除任务失败！"
              });
            });
        }
      });
    }
  }
};
</script>
<style scoped>
.repayment-plan-list {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.plan-header {
  width: 100%;
  height: 12.0625;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid #ededed;
}
.plan-list {
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100% - 12.0625rem);
  width: 100%;
}
.no-plan-list {
  height: 2rem;
  width: 100%;
  padding-top: 2rem;
  color: #626262;
  text-align: center;
  opacity: 0.6;
}
.pandect {
  height: 8.375rem;
  width: 100%;
  padding: 1.625rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
  background-position: center -4rem;
  background-size: 250% 13rem;
  background-repeat: no-repeat;
  background-image: linear-gradient(-126deg, #c86dd7 0%, #3023ae 100%);
}
.status {
  height: 3.0625rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1.25rem;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  color: #626262;
  font-size: 0.8125rem;
  line-height: 1;
  text-align: left;
}
.repay-sum-board,
.consumption-sum-board {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: center;
  font-size: 0.75rem;
  position: relative;
}
.parting-line {
  position: absolute;
  border-left: 0.0625rem solid #c4a8e6;
  width: 0;
  height: 1.25rem;
  margin-top: -0.625rem;
  top: 50%;
  right: -0.0625rem;
  opacity: 0.5;
}
.board-tips {
  opacity: 0.5;
  height: 1rem;
  line-height: 1rem;
  margin-bottom: 0.8125rem;
}
.board-value {
  height: 3.0625rem;
  line-height: 3.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-sum {
  height: 1.25rem;
  width: 1.25rem;
  box-sizing: border-box;
  display: inline-block;
  background-image: url(../../../static/img/sum.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 0.2rem;
}
.integer,
.point {
  font-size: 2.1875rem;
  line-height: 2.1875rem;
}
.decimal {
  font-size: 1rem;
}
.status-cell {
  flex-grow: 1;
  box-sizing: border-box;
  padding: 0.9375rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-cell > span {
  display: inline-block;
}
.icon-satus {
  display: inline-block;
  width: 0.8125rem;
  height: 0.8125rem;
  box-sizing: border-box;
  border: 1px solid;
  border-radius: 100%;
  margin-right: 0.3125rem;
  position: relative;
}
.icon-satus::after {
  content: "";
  height: 0.56rem;
  width: 0.56rem;
  position: absolute;
  margin-top: -0.28rem;
  margin-left: -0.28rem;
  left: 50%;
  top: 52%;
  border-radius: 100%;
}
.icon-status-0 {
  border-color: #cccccc;
}
.icon-status-0::after {
  background-color: #cccccc;
}
.icon-status-1 {
  border-color: #71e9a4;
}
.icon-status-1::after {
  background-color: #71e9a4;
}
.icon-status-2 {
  border-color: #40d7ff;
}
.icon-status-2::after {
  background-color: #40d7ff;
}
.icon-status-3 {
  border-color: #ffd14b;
}
.icon-status-3::after {
  background-color: #ffd14b;
}
.icon-status-4 {
  border-color: #f16541;
}
.icon-status-4::after {
  background-color: #f16541;
}
.plan-cell {
  margin-top: 0.625rem;
  box-sizing: border-box;
  padding: 1.25rem;
  padding-bottom: 0;
  width: 100%;
  background-color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
}
.submit-date-board {
  padding-bottom: 1rem;
  border-bottom: 1px solid #ededed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.1875rem;
}
.submit-date {
  line-height: 1.1875rem;
  font-size: 0.8125rem;
  color: #626262;
}
.submit-label {
  padding-right: 1.1875rem;
  display: flex;
  align-items: center;
}

.consumption-info {
  padding-top: 1.625rem;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.plan-consumption-sum,
.plan-repayment-sum {
  width: 9.21875rem;
  box-sizing: border-box;
  height: 3.125rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  color: #aaaaaa;
}
.plan-commission,
.plan-repayment {
  flex-grow: 1;
  box-sizing: border-box;
  padding-left: 1.25rem;
  color: #aaaaaa;
  position: relative;
}
.plan-commission::after,
.plan-repayment::after {
  content: "";
  position: absolute;
  border-left: 0.0625rem solid #ededed;
  width: 0;
  height: 1.5625rem;
  margin-top: -0.78125rem;
  top: 50%;
  left: -0.0625rem;
  opacity: 0.5;
}
.sum-value {
  font-size: 1.5rem;
  line-height: 2.0625rem;
  color: #626262;
}
.repayment-info {
  padding-top: 0.3125rem;
  padding-bottom: 1.625rem;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border-bottom: 1px solid #ededed;
}
.plan-status {
  padding: 0.75rem 0;
  height: 1.125rem;
  line-height: 1.125rem;
  font-size: 0.8125rem;
  color: #626262;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plan-status > span.show-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.commission-cell {
  height: 1.25rem;
  padding-top: 0.3125rem;
}
.commission-cell-value {
  font-size: 0.875rem;
  color: #ff3c4b;
  padding-left: 0.5rem;
}
.btn-u {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 4px;
  border: 1px solid;
  border-radius: 3px;
  margin-right: 6px;
}
.btn-active {
  color: #71e9a4;
  border-color: #71e9a4;
}
.btn-del {
  color: #ff3c4b;
  border-color: #ff3c4b;
}
</style>